<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>窗口视图</title>
  <style>
    *{
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .parrent{
      width: 300px;
      height: 300px;
      position: relative;
      left: 0px;
      top: 200px;
      border: 1px solid #332211;
      padding: 20px;
    }
    .child{
      width: 100px;
      height: 100px;
      position: relative;
      left: 100px;
      top: 20px;
      border: 1px solid #119988;
    }
  </style>
</head>
<body>
  <div class="parrent">
    <div class="child"></div>
  </div>

  <!-- 折叠区 -->
  <p id="p1">折叠区 1</p><p id="p2">折叠区 2</p>

  <script>
    // let parrent = document.querySelectorAll(".parrent")
    let parrent = document.getElementsByClassName("parrent")[0]

    let child = document.querySelectorAll(".child")[0]
    console.log(parrent.offsetWidth)
    console.log(parrent.offsetLeft)
    console.log(child.offsetLeft)

    // 判断浏览器是否支持range方法
    let supportsRange = document.implementation.hasFeature("Range", "2.0");
    console.log(supportsRange)

    // 折叠区
    let p1 = document.getElementById("p1")
    let p2 = document.getElementById("p2")
    let range = document.createRange()
    range.setStartAfter(p1)
    range.setEndBefore(p2)
    alert(range.collapsed)
  </script>
</body>
</html>